@font-face{
    font-family: 'turn-arrow';
    src: url('../fonts/icons/turn-arrow.eot') format('embedded-opentype'), url('../fonts/icons/turn-arrow.woff') format('woff'), url('../fonts/icons/turn-arrow.ttf') format('truetype'), url('../fonts/icons/turn-arrow.svg') format('svg');
}

html, body{
  width: 100%;
  height: 100%;
  background-color: #222;
}


.content{
  width: 100%;
  height: 100%;
}


/**stage***/

.stage{
  position: relative;
  width: 100%;
  height: 630px;
}



.img-sec{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #ddd;    
  perspective: 1800px;

}

.img-figure{
  position:  absolute;

  width: 320px;
  height: 360px;
  margin: 0;
  padding: 40px;

  background-color: #fff;
  box-sizing: border-box;

  cursor: pointer;

  transform-style: preserve-3d;
  transform-origin: 0 50% 0;
  transition: transform .6s ease-in-out, left .6s ease-in-out, top .6s ease-in-out;
}

.img-back {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;
  padding: 50px 40px;
  overflow: auto;

  color: #a7a0a2;
  font-size: 22px;
  line-height: 1.25;
  text-align: left;

  background-color: #fff;

  box-sizing: border-box;
  transform: rotateY(180deg) translateZ(1px);
  backface-visibility: hidden;

  p {
    margin: 0;
  }
}

.is-inverse{
  transform: translate(320px) rotateY(180deg);
}

.img-title{
  margin: 20px 0 0 0;

  color: #a7a0a2;
  font-size: 16px;
}

figcaption {
  text-align: center;
}

.controller-nav{
  position: absolute;;
  left: 0;
  bottom: 30px;
  z-index: 101;

  width: 100%;

  text-align: center
}

.controller-unit{
  display: inline-block;
  marks: 0 5px;
  width: 30px;
  height: 30px;

  text-align: center;
  cursor: pointer;
  background-color: #aaa;
  border-radius: 50%;

  vertical-align: middle;

  transform: scale(.5);
  transition: transform .6s ease-in-out, background-color .3s;
}

.is-center{
  background-color: #888;
  transform: scale(1);

}
.is-center::after{
   color:#fff;
   font-family: "turn-arrow";
   line-height: 30px;
   content: "\e600";

   font-size: 80%;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

.is-inverse{
  background-color: #555;
  transform: rotateY(180deg);
}